<template>
  <div class="date-time">
    <mu-bottom-sheet :open="bottomSheet" @close="closeBottomSheet">
      <mu-sub-header>
        请选择日期
      </mu-sub-header>
      <div class="content">
        <mu-picker :slots="timeTitleSlots" :visible-item-count="1" :values="timeTitles" style="border-bottom: 3px solid #000" />
        <mu-picker :slots="timeSlots" :visible-item-count="5" @change="timeChange" :values="times" />
      </div>
      <full-button name="确定" v-tap="{methods: setDateTime}"></full-button>
    </mu-bottom-sheet>
  </div>
</template>

<script>
/**
 * 时间选择组件
 * @return 时间数组 见this.times
 */
import fullButton from "components/button/full_button";
let CURRENT = now();
let YEARS = getData(5, new Date().getFullYear());
let MONTHS = getData(12, 1);
let DAYS = getData(getDaysInMonth(CURRENT[0], CURRENT[2]), 1);
let HOURS = getData(24, 0);
let MINUTES = getData(60, 0);
let SECONDS = getData(60, 0);
let DateTimeTitle = [
  ["年"],
  "",
  ["月"],
  "",
  ["日"],
  "",
  ["时"],
  "",
  ["分"],
  "",
  ["秒"]
];
let defaultDateTimeTitle = ["年", "", "月", "", "日", "", "时", "", "分", "", "秒"];

/**
 * get DATA
 * @augments count 总计
 * @augments start 开始
 */
function getData(count, start) {
  let temp = [];
  for (let index = start; index < count + start; index++) {
    temp.push(cusPadStart(String(index), 2, "0"));
  }
  return temp;
}

/**
 * 获取某个月的天数
 */
function getDaysInMonth(year, month) {
  var date = new Date(year, month, 1);
  return new Date(date.getTime() - 864e5).getDate();
}

function now(str) {
  var date = str ? new Date(str) : new Date();
  var year = date.getFullYear() + "";
  var month = cusPadStart((date.getMonth() + 1).toString(), 2, "0");
  var day = cusPadStart(date.getDate().toString(), 2, "0");
  var hour = cusPadStart(date.getHours().toString(), 2, "0");
  var minute = cusPadStart(date.getMinutes().toString(), 2, "0");
  var second = cusPadStart(date.getSeconds().toString(), 2, "0");
  return [year, "-", month, "-", day, " ", hour, ":", minute, ":", second];
}

/**
 * padstart方法
 */
function cusPadStart(str, len, strPre) {
  if (String.prototype.padStart) {
    str = str.padStart(len, strPre);
  } else {
    let tempLen = len - str.length;
    for (let index = 0; index < tempLen; index++) {
      str = strPre + str;
    }
  }
  return str;
}

export default {
  name: "date-time",
  components: { fullButton },
  data() {
    return {
      // bottomSheet:false,
      times: now(this.value ? this.value : ""),
      timeTitles: defaultDateTimeTitle
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    start: {
      type: String
    },
    format: {
      type: String
    },
    value: {
      type: String
    }
  },
  computed: {
    bottomSheet() {
      return this.isShow;
    },
    timeSlots() {
      let tempSlot = [
        {
          width: "120%",
          textAlign: "center",
          values: YEARS
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: "-"
        },
        {
          width: "100%",
          textAlign: "center",
          values: MONTHS
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: "-"
        },
        {
          width: "100%",
          textAlign: "center",
          values: DAYS
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: " "
        },
        {
          width: "100%",
          textAlign: "center",
          values: HOURS
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: ":"
        },
        {
          width: "100%",
          textAlign: "center",
          values: MINUTES
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: ":"
        },
        {
          width: "100%",
          textAlign: "center",
          values: SECONDS
        }
      ];
      this.format ? tempSlot.splice(this.format.length) : tempSlot;
      return tempSlot;
    },
    timeTitleSlots() {
      let tempSlot = [
        {
          width: "120%",
          textAlign: "center",
          values: DateTimeTitle[0]
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: DateTimeTitle[1]
        },
        {
          width: "100%",
          textAlign: "center",
          values: DateTimeTitle[2]
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: DateTimeTitle[3]
        },
        {
          width: "100%",
          textAlign: "center",
          values: DateTimeTitle[4]
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: DateTimeTitle[5]
        },
        {
          width: "100%",
          textAlign: "center",
          values: DateTimeTitle[6]
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: DateTimeTitle[7]
        },
        {
          width: "100%",
          textAlign: "center",
          values: DateTimeTitle[8]
        },
        {
          width: "10%",
          textAlign: "center",
          divider: true,
          content: DateTimeTitle[9]
        },
        {
          width: "100%",
          textAlign: "center",
          values: DateTimeTitle[10]
        }
      ];

      this.format ? tempSlot.splice(this.format.length) : tempSlot;
      return tempSlot;
    }
  },
  methods: {
    timeChange(value, index) {
      this.times.splice(index, 1, value);
      // 计算下该月共有多少天
      if (index == 2 || index == 0) {
        // old day counts
        let _monthDays = MONTHS.length;
        // new day counts
        let monthDays = getDaysInMonth(this.times[0], Number(this.times[2]));

        // 两次选择的月份不同, 则对天数做一下兼容
        if (_monthDays != monthDays) {
          this.timeSlots[4].values = getData(monthDays, 1);
          if (Number(this.times[4]) > monthDays) {
            this.times[4] = monthDays.toString().padStart("0", 2);
          }
        }
      }
      // console.log(this.times);
    },
    closeBottomSheet() {
      this.$emit("closeDateTime");
      // this.bottomSheet = false;
    },
    setDateTime() {
      this.format ? this.times.splice(this.format.length) : this.times;
      this.$emit("getDateTime", this.times);
      this.closeBottomSheet();
    }
  },
  created() {
    // year
    let current_year = new Date().getFullYear();
    let start_year = this.start
      ? new Date(this.start).getFullYear()
      : current_year;
    let year_count = Number(current_year) - Number(start_year) || 5;
    CURRENT = now(this.value);
    YEARS = getData(year_count, start_year);
    MONTHS = getData(12, 1);
    DAYS = getData(getDaysInMonth(CURRENT[0], CURRENT[2]), 1);
    HOURS = getData(24, 0);
    MINUTES = getData(60, 0);
    SECONDS = getData(60, 0);
  }
};
</script>

<style lang="scss">
.content {
  padding: 20px;
  .mu-picker-item {
    font-size: 15px;
  }
}
</style>
